// ------------筛选---------------
// 获取所有的分类，渲染到 select>option 中
let form = layui.form;
// console.log(form);
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        // console.log(res);
        let str = '';
        res.data.forEach(item => {
            str += `<option value="${item.id}">${item.name}</option>`
        });
        $('select[name=cate_id]').append(str)

        // 更新渲染
        //form.render(); //如果没有参数（更新全部）
        form.render('select')  //刷新select选择框渲染 
    }
})

//-----------富文本编辑器-----------------
initEditor();


// ---------封面图片的处理----------
// 1.初始化剪裁框
let img = $('#image');
let option = {
    // 宽高比
    aspectRatio: 400 / 280,
    // 预览区
    preview: '.img-preview'
}
img.cropper(option)

// 2.点击按钮能够选择图片
$('button:contains("封面")').on('click', function () {
    $('#file').trigger('click')
})

// 3.当文件域的内容改变的时候，修改剪裁图片
$('#file').on('change', function () {
    if (this.files.length > 0) {
        let fileObj = this.files[0];
        let url = URL.createObjectURL(fileObj);
        // 更换图片（销毁目前的剪裁图片 --> 更换图片 -->重建剪裁框）
        img.cropper('destroy').attr('src', url).cropper(option)
    }
})

//-----------完成添加-----------------
//表单提交 --> 阻止默认行为 --> 收集数据 --> Ajax提交
$('form').on('submit', function (e) {
    // 阻止默认行为
    e.preventDefault();
    //因为有文件上传，所以必须使用 FormData 对象
    let fd = new FormData(this)   //传入表单的DOM对象，FormData可以根据各项的name属性收集值
    // 处理内容，通过富文本编辑器的语法，获取编辑器的内容。并把内容添加到fd对象中
    fd.set('content', tinyMCE.activeEditor.getContent())
    // 处理封面图片（剪裁图片，把图片转换成文件对象，最后追加到fd对象）
    let canvas = img.cropper('getCroppedCanvas', { width: 400, height: 280 });

    canvas.toBlob(function (blob) {
        // 形参 blob 是blob对象，追加到fd中，就会变为文件对象
        fd.append('cover_img', blob);
        // 测试，看一下fd对象中有哪些值
        // fd.forEach((value, key) => {
        //     console.log(value, key);
        // })
        // Ajax提交
        $.ajax({
            url: '/my/article/add',
            type: 'post',
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                // console.log(res);
                layer.msg(res.message)
                // 返回登录框
                location.href = './list.html'
            }
        })
    })

})